.flex-box() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/*横向排列*/
.flex-box-h() {
  .flex-box();
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

/*竖向排列*/
.flex-box-s() {
  .flex-box();
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.flex-warp() {
  -webkit-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex(@flex:1) {
  display: block;
  -webkit-box-flex: @flex;
  -moz-box-flex: @flex;
  -webkit-flex: @flex;
  -ms-flex: @flex;
  flex: @flex;
}

.flex-justify(@align:center) {
  -moz-justify-content: @align;
  -ms-justify-content: @align;
  -o-justify-content: @align;
  -webkit-justify-content: @align;
  justify-content: @align;
}

.flex-items(@align:center) {
  -webkit-align-items: @align;
  -moz-align-items: @align;
  -ms-align-items: @align;
  -o-align-items: @align;
  align-items: @align;
}

.flex-center() {
  -webkit-box-align: center;
  -webkit-box-pack: center;
  .flex-items();
  .flex-justify();
}

.flex-justify-09(@align) {
  -webkit-box-pack: @align;
}

.flex-items-09(@align) {
  -webkit-box-align: @align;
}

.flex-direction-reverse () {
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  -webkit-box-direction: reverse;
}
